<template>
  <div class="markdown-viewer-container">
    <div class="markdown-viewer" v-html="renderedMarkdown"></div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { convertKeysToObsUrls } from '#/utils/getImgUrl';

interface Props {
  content: string;
  showDebug?: boolean;
}

const props = defineProps<Props>();
const processedHtml = ref('');
const hasObsKeys = ref(false);

// 简单的内容处理函
const processContentWithoutMarkdown = (content: string): string => {
  if (!content) return '';

  // 如果内容已经包含HTML标签，直接返回
  if (/<[^>]+>/.test(content)) {
    return content;
  }

  // 简单的文本处理：将换行符转换为<br>标签
  return content.replace(/\n/g, '<br>');
};

// 异步处理Markdown内容，包括图片转换
const processContent = async (content: string) => {
  if (!content) {
    processedHtml.value = '';
    return;
  }

  try {
    // 检查内容中是否包含obs-key标记
    const contentHasObsKeys = /src\s*=\s*["']obs-key:/i.test(content);
    hasObsKeys.value = contentHasObsKeys;
    // console.log('MarkdownViewer - 是否包含obs-key:', contentHasObsKeys);

    let processedContent = content;

    // 如果包含obs-key标记，先转换为实际URL
    if (contentHasObsKeys) {
      processedContent = await convertKeysToObsUrls(content);
      // console.log('MarkdownViewer - 转换图片后:', processedContent);
    }

    // 使用简单的内容处理函数
    const htmlContent = processContentWithoutMarkdown(processedContent);
    // console.log('MarkdownViewer - 内容处理后:', htmlContent);

    // 检查渲染后的HTML是否还有obs-key标记
    const stillHasObsKeys = /src\s*=\s*["']obs-key:/i.test(htmlContent);
    if (stillHasObsKeys) {
      // console.log('MarkdownViewer - 渲染后仍有obs-key，再次转换');
      const finalContent = await convertKeysToObsUrls(htmlContent);
      // console.log('MarkdownViewer - 最终内容:', finalContent);
      processedHtml.value = finalContent;
    } else {
      processedHtml.value = htmlContent;
    }

  } catch (error) {
    // console.error('处理内容时出错:', error);
    // 如果处理失败，使用简单的内容处理
    try {
      const basicContent = processContentWithoutMarkdown(content);
      processedHtml.value = basicContent;
    } catch (fallbackError) {
      // console.error('备用处理也失败:', fallbackError);
      processedHtml.value = content; // 最后的备用方案，直接显示原始内容
    }
  }
};

// 监听内容变化
watch(() => props.content, (newContent) => {
  processContent(newContent);
}, { immediate: true });

const renderedMarkdown = computed(() => processedHtml.value);
</script>

<style scoped>
.markdown-viewer-container {
  width: 100%;
}
.markdown-viewer {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* 响应式设计 */
@media (max-width: 768px) {
  .markdown-viewer {
    font-size: 14px;
  }

  .markdown-viewer :deep(h1) {
    font-size: 1.8em;
  }

  .markdown-viewer :deep(h2) {
    font-size: 1.4em;
  }

  .markdown-viewer :deep(h3) {
    font-size: 1.2em;
  }

  .markdown-viewer :deep(pre) {
    padding: 0.8em;
    font-size: 0.8em;
  }

  .markdown-viewer :deep(ul),
  .markdown-viewer :deep(ol) {
    padding-left: 1.5em;
  }
}
</style>
